<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- vue修饰视图使用id -->
    <div id="div">
        <div>姓名:{{name}}</div>
        <div>班级:{{classRoom}}</div>
    </div>

    <script src="../vue/vue.js"></script>
    <script>
        //脚本
        let ve = new Vue({
            //1.同css style标签声明相同,表示修饰的视图即 html 标签
            el: "#div",

            //2.vue的数据
            //使用{ key : value , ... , key : value }形式 定义数据
            //必须与上述标签插值名字相同
            data: {
                name: "李四",
                classRoom: "3班"
            },

            //3.定义vue中的函数
            methods: {
                printName: function () {
                    console.log("姓名" + this.name)
                },

                //不使用function关键字
                printClass() {
                    console.log("班级" + this.classRoom)
                }
            }
        })

        ve.printName()
        ve.printClass()
    </script>
</body>

</html>